<template> 
    <div>
            <el-input v-model="title"></el-input>
            <el-button type="primary" @click="onSubmit">查询</el-button> <el-button>取消</el-button>
 
          <div class="container">
              <el-card class="box-card" v-for="(e,i) in list" :key="i" @click="toDetail(e)">
                  {{ e.id }}
                  {{ e.title }}
                  {{ e.tip }}
                  {{ e.videoImg }} 
                  {{ e.actionTime }}
              </el-card> 
          </div>  
    </div>
</template>
<script>
export default {
    data(){
        return{ 
          title:"",
          list: [],
        }
    },
    created(){
      this.getData()
    },
    methods:{
        async  getData(){
          var data =  await this.post("/article/list")
          console.log(data)
          this.list = data.data
          if(data.code){
             return this.message.info("暂无内容")
          }

        },
        onSubmit(){

        }, 
        toDetail(row){ 
           this.$router.push({  name: "detail", params: {  id:row.id  } })
        }
    }
}
/*

*/
</script>
<style lang="scss" scoped>
.box-card {
    display: inline-block;
    margin: 10px;
}
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 400px);
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-gap: 20px 20px;
}
.gard-center{ 
  justify-items: center;
  align-items: center;
  place-items:center center;
}
</style>